<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            text-indent: 4px;
        }

        .box span {
            display: block;
            width: 300px;
            height: 40px;
            border: solid 1px black;
            cursor: pointer;
        }

        .box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            border: solid 1px black;
            border-top: none;
            width: 300px;
            text-indent: 1em;
            display: none;
        }

        .box ul li.hover {
            background: #66f;
            color: #fff
        }

        em {
            float: right;
            margin-right: 40px;
        }
        i{
            float: right;margin: 15px 20px 0;width: 0px;height: 0px;border-left: solid 10px transparent;border-top: solid 10px green;border-right: solid 10px transparent;display: block;
        }
    </style>
</head>

<body>
    <!-- <select name="" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
    </select> -->

    <div class="box">
        <span></span>
        <ul class="list">
            <li>吴彦祖</li>
            <li>彭于晏</li>
            <li>张新同</li>
            <li>吴亦凡</li>
            <li>郭富城</li>
        </ul>
    </div>
</body>
<script>
    var ospan = document.querySelector(".box span");
    var oul = document.querySelector(".list");
    var ali = document.querySelectorAll(".list li");

    // 记录下拉菜单的显示状态：0表示要显示，1表示要隐藏
    var flag = 0;
    // 点击span，让下拉菜单显示或隐藏
    ospan.onclick = function (eve) {
        // 判断状态，决定下拉菜单显示或隐藏，并更新状态
        if (flag == 0) {
            oul.style.display = "block";
            flag = 1;
        } else {
            oul.style.display = "none";
            flag = 0;
        }
        var e = eve || window.event;
        e.stopPropagation();
    }
    var aaa = 0;
    setDefault();
    // 鼠标移入的效果
    for (i = 0; i < ali.length; i++) {
        // 给每个li添加索引
        ali[i].index = i;
        // 鼠标移入li时,显示样式
        ali[i].onmouseenter = function () {
            this.className = "hover";
        }
        // 鼠标移出时，隐藏样式
        ali[i].onmouseout = function () {
            this.className = "";
        }

        // 鼠标点击事件
        ali[i].onclick = function () {
            // console.log(this.xuhao);
            // 先取消默认选中
            ali[aaa].lastElementChild.remove();
            // 修改默认索引，为点击的元素的索引
            aaa = this.index;
            // 修改默认项
            setDefault()

            // 隐藏下拉菜单
            oul.style.display = "none";
            // 同时更新下拉菜单的状态
            flag = 0;
        }
    }
    // 点击网页的空白区域，下拉列表收缩
    document.onclick = function () {
        oul.style.display = "none"
        flag = 0;
    }
    // 封装的函数区域
    function setDefault() {
        // 根据索引，设置要显示的内容
        ospan.innerHTML = ali[aaa].innerHTML;
        // 及选中的状态
        var em = document.createElement("em")
        em.innerHTML = "√";
        ali[aaa].appendChild(em);
    }
    // 防止事件冒泡的兼容
    function stopBubble(e) {
        if (e.stopPropagation) {
            e.stopPropagation()
        } else {
            e.cancelBubble = true;
        }
    }
</script>

</html>